<template>
  <div id="app">
    <form-create v-model="formData" v-model:api="formApi" :rule="formRules" @submit="handleSubmit" />

    <!-- 显示接口返回的消息的模态框 -->
    <div v-if="showModal" class="modal-overlay" @click="hideModal">
      <div class="modal-content" @click.stop>
        <h2 class="modal-title">接口返回消息</h2>
        <div class="modal-body">
          <pre><strong>Status Code:</strong> {{ statusCode }}</pre>
          <pre><strong>Response Data:</strong> {{ responseData }}</pre>
          <pre><strong>Error Message:</strong> {{ errorMessage }}</pre>
        </div>
        <button class="modal-close" @click="hideModal">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios'; // 引入 axios 库

// 表单数据
const formData = ref({});
// 表单 API 实例
const formApi = ref(null);
// 控制模态框的显示
const showModal = ref(false);
// 接口返回的消息
const responseData = ref('');
const statusCode = ref('');
const errorMessage = ref('');

// 表单规则
const formRules = ref([
  {
    "type": "group",
    "field": "LIFNR",
    "title": "供应商查询",
    "info": "",
    "$required": false,
    "props": {
      "min": 1,
      "expand": 1,
      "rule": [
        {
          "type": "input",
          "field": "taxnumber",
          "title": "统一信用代码",
          "info": "",
          "$required": false,
          "props": {
            "maxlength": 18
          },
          "_fc_id": "id_Fr8xm0kpk6iib5c",
          "name": "ref_F063m0kpk6iib6c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        }
      ]
    },
    "_fc_id": "id_Fc8tm0kpk3uqb2c",
    "name": "ref_F6vqm0kpk3uqb3c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "group"
  }
]);

// 隐藏模态框的函数
const hideModal = () => {
  showModal.value = false;
};

// 提交表单的函数
const handleSubmit = async (data) => {
  console.log('提交的数据:', JSON.stringify(data, null, 2));
  try {
    const username = 'IT10';
    const password = '654321';
    const encodedCredentials = btoa(`${username}:${password}`);
    const response = await axios.post('/zjcpt/ZFM_JICAI_08?sap-client=700', data, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + encodedCredentials
      }
    });

    // 调试信息
    console.log('接口返回完整响应:', response);

    // 处理接口的响应
    responseData.value = JSON.stringify(response.data, null, 2);
    statusCode.value = response.status;
    errorMessage.value = '';
    showModal.value = true; // 显示模态框
  } catch (error) {
    // 调试信息
    console.error('提交失败:', error);

    // 处理错误情况
    if (error.response) {
      console.log('错误响应:', error.response);
      responseData.value = JSON.stringify(error.response.data, null, 2);
      statusCode.value = error.response.status;
      errorMessage.value = error.response.data.message || '提交失败，请重试。';
    } else {
      responseData.value = '';
      statusCode.value = '';
      errorMessage.value = '提交失败，请重试。';
    }
    showModal.value = true; // 显示模态框
  }
};
</script>

<style scoped>
/* 样式可根据需要调整 */
.response-message {
  margin-top: 20px;
  color: #409eff;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 80%;
  width: 600px; /* 适应屏幕宽度 */
  max-height: 80%; /* 适应屏幕高度 */
  overflow: auto; /* 添加滚动条 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

.modal-title {
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

.modal-body {
  margin-top: 10px;
  color: #333;
  overflow-y: auto; /* 内部滚动条 */
}

.modal-body pre {
  white-space: pre-wrap; /* 保持换行 */
  word-break: break-word; /* 自动换行 */
  background: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: auto;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #ff4d4d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 1em;
}

.modal-close:hover {
  background: #e60000;
}
</style>
